<template>
  <div>
    <div class="header">
      <span></span>
      <span>{{ time }}</span>
      <a-button @click="saveAll()">保存</a-button>
    </div>
    <a-progress :percent="percent"></a-progress>
    <div style="margin-top: 20px">
      <div v-for="item in list" :key="item.id" :class="item.state == 0 ? 'list-item' : item.state == 1 ? 'success list-item' : 'danger list-item'">
        <div>
          <div class="list-content">
            <div class="list-content-space">{{ item.title }}</div>
            <div class="list-content-space">{{ item.time }}</div>
            <div class="list-content-space">{{ item.duration }}分钟</div>
            <div class="list-content-space">{{ item.score }}</div>
          </div>
          <div style="margin-top: 5px" class="list-content">
            <div class="list-content-space">{{ item.tag }}</div>
            <div class="list-content-space">{{ item.category }}</div>
            <div class="list-content-space">{{ item.taskLevel }}</div>
            <div class="list-content-space">{{ item.learnTitle }}</div>
          </div>
        </div>
        <div>
          <a-button type="danger" @click="delete_item(item)">删除</a-button>
          <!-- <a-button type="warn" style="margin-left: 20px" @click="unfinish(item)"
            >未完成</a-button
          > -->
          <a-button
            style="margin-left: 20px"
            :type="item.state == 0 ? '' : item.state == 1 ? 'primary' : 'danger'"
            @click="finish(item)"
            >{{
              item.state == 0 ? "未完成" : item.state == 1 ? "完成" : "超时"
            }}</a-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { getDailyTaskList, saveDailyTaskList } from "@/api/CustomRequest";

// 导入mixin文件
import mixin from "./mixin";

export default {
  mixins: [mixin],
  name: "currentTask", // 任务 任务
  data() {
    return {
      state: 0,
      time: "",
      percent: 1,
      list: [],
    };
  },
  created() {
    this.init();

    this.getToadyTask();

    setInterval(() => {
      this.time = moment().format("MMMM Do YYYY, h:mm:ss a");

      let str = moment().format("YYYYMMDD");

      let m1 = moment(str + " 00:00:00", "YYYYMMDD HH:mm:ss").valueOf();
      let m2 = moment().valueOf();

      this.percent = ((m2 - m1) / (1000 * 24 * 60 * 60)) * 100;
      this.percent = parseInt(this.percent.toFixed(0));

      //   console.log(">>>time out", str, m1, m2, this.percent);
    }, 1000);
  },
  methods: {
    async getToadyTask() {
      let data = await getDailyTaskList();

      console.log(">>>>>>", data);

      this.list = data;
      this.checkTaskStates();
    },
    checkTaskStates() {
      this.list.map((item) => {
        if (item.state == null) {
          item.state = 0;
        }

        let m1 = 0;
        if (item.beginTime != null) {
          m1 = moment(item.beginTime, "YYYY-MM-DD HH:mm:ss").valueOf();
        }
        let m2 = moment().valueOf();

        if (m1 != 0) {
          if (m2 - m1 > 0 && item.isRepeat == 0) {
            item.state = 2;
          }
        }
      });
    },
    async saveAll() {
      let self = this;

      this.$confirm({
        content: "今天已成，无需再思；明日在即，畅想未来；活在当下。",
        async onOk() {
          let task_score = 0;
          let task_finish = 0;
          let task_time_out = 0;
          let task_un_finish = 0;
          let task_list = [];

          self.list.map((item) => {
            // if (item.state == 0) {
            //   item.state = 2;
            // }

            if (item.state == 1) {
              task_score += item.score;
              task_finish += 1;
            } else if (item.state == 0) {
              task_un_finish += 1;
            } else {
              task_time_out += 1;
            }

            task_list.push(item);
          });

          let str = moment().format("YYYYMMDD");
          await saveDailyTaskList({
            title: str,
            taskScore: task_score,
            taskNum: task_list.length,
            taskFinish: task_finish,
            taskTimeOut: task_time_out,
            taskUnFinish: task_un_finish,
            taskList: JSON.stringify(task_list)
          });
        },
        cancelText: "取消",
      });
    },
    delete_item(item) {
      let list = [];

      this.list.map((it) => {
        if (item.id != it.id) {
          list.push(item);
        }
      });

      this.list = list;
    },
    unfinish(item) {
      item.state = 0;
      this.checkTaskStates();
      this.$forceUpdate();
    },
    finish(item) {
      if (item.state == 0) {
        item.state = 1;
      } else {
        item.state = 0;
      }
      this.checkTaskStates();
      this.$forceUpdate();
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.list-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #efefef;
  padding-top: 10px;
  padding-bottom: 10px;
}
.list-content {
  display: flex;
  flex-direction: row;
}
.list-content-space {
  margin-right: 20px;
  width: 100px;
}
.success {
  background-color: rgb(3, 215, 145);
}
.error {
  background-color: rgb(210, 48, 30);
}
</style>
